<template>
  <j-modal
    :title="title"
    :width="650"
    :footer="null"
    :visible="visible"
    :maskClosable="false"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    :fullscreen="false"
    @close="close"
    :destroyOnClose="true"
    cancelText="关闭"
  >
    <div class="status_list">
      <!-- <h4>审批进度</h4>
        <div style="margin-top: 15px"> -->
      <!-- <a-table
            bordered
            :columns="columns"
            @change="handleTableChange"
            :pagination="ipagination"
            :data-source="dataSource"
            :scroll="{ x: 500 }"
          ></a-table> -->

      <a-steps :current="0" direction="vertical">
        <a-step v-for="item in dataSource" :key="item.id">
          <div slot="icon" class="step_icon">
            <a-icon type="solution" />
          </div>
          <span slot="title"
            ><div class="step_title">{{ item.createTime }}</div></span
          >
          <span slot="description">
            <div class="step_desc">
              <a-row>
                <a-col :sm="12">
                  <div class="step_desc_item">
                    <label>审批人：</label>
                    <div>{{ item.reviewer }}</div>
                  </div>
                </a-col>

                <a-col :sm="12">
                  <div class="step_desc_item">
                    <label>单位：</label>
                    <div>{{ item.reviewerDeptName }}</div>
                  </div>
                </a-col>
              </a-row>

              <a-row style="margin-top:10px">
                <div class="step_desc_item">
                  <label style="width:15%">审批意见：</label>
                  <div>
                    {{ item.opinion }}
                  </div>
                </div>
              </a-row>
            </div>
          </span>
        </a-step>
      </a-steps>
    </div>
  </j-modal>
</template>
<script>
import { getAction } from '@/api/manage'
import { postAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'SysPositionModal',
  components: {},
  mixins: [JeecgListMixin],
  data() {
    return {
      dataSource: [],
      cases: {
        3: '三级公司',
        2: '二级公司',
        1: '股份公司',
      },
      disableSubmit: false,
      title: '',
      visible: false,
      isCheck: false,
      model: {},
      url: {
        // get: '/sjzyzhgl/sjPlanInfo/planInfoList',
        // exportList: '/sjzyzhgl/sjPlanInfo/exportXlsByTemplate',
        list: '/incon/inconReviewPlan/getRejectReason',
      },
      formType: '单位',
      queryParam: {},
      rowData: {},
      submitData: {},
      disableMixinCreated: true,
    }
  },
  created() {},
  methods: {
    check(record) {
      this.model = Object.assign({}, record)
      this.visible = true
      this.list()
    },
    list() {
      getAction(this.url.list, {
        id: this.model.id,
      }).then((res) => {
        if (res.success && res.result) {
          this.dataSource = res.result
        }
      })
    },
    close(isSubmit) {
      if (isSubmit) {
      } else {
        this.visible = false
      }
    },
  },
}
</script>

<style lang="less" scoped>
@paramyColor: #3955a5;
.status_list {
  width: 100%;
  // margin-left: 50px;
  height: 60vh;
  overflow: auto;
}
h4 {
  color: #383f6c;
}
.step_icon {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 38px;
  border: 1px solid @paramyColor;
}
.step_desc {
  margin-top: 5px;
  padding: 10px 20px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border: 1px dashed @paramyColor;
  .step_desc_item {
    display: flex;
    // justify-content: space-between;
    // margin: 0 10px;
    label {
      width: 22%;
    }
    div {
      width: 78%;
    }
  }
}
.step_title {
  padding: 0 25px;
  text-align: center;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: @paramyColor;
  color: #fff;
  font-size: 12px;
}
.ant-steps-item-process {
  .step_icon {
    border-color: coral !important;
    background-color: #f4943d !important;
  }
  .step_title {
    background-color: #f4943d !important;
  }
  .step_desc {
    border-color: rgb(244, 148, 63) !important;
    background-color: rgba(244, 148, 63, 0.2) !important;
  }
  .anticon {
    color: #fff !important;
  }
}

.ant-steps-item-wait {
  .step_icon {
    border-color: #3955a6 !important;
    background-color: transparent !important;
  }
  .step_title {
    background-color: @paramyColor !important;
  }
  .step_desc {
    color: rgba(0, 0, 0, 0.65);
    border-color: @paramyColor !important;
    background-color: rgba(@paramyColor, 0.2) !important;
  }
  .anticon {
    color: @paramyColor !important;
  }
}
</style>
